<script setup>
import Progress from '@/components/Progress.vue';
</script>

<template>
  <div class="fourth-page">
    <div class="f-left">
      <Progress></Progress>
    </div>
    <div class="f-right">
      <h1># {{ $t("title3") }}</h1>
      <p>{{ $t("text3") }}</p>
    </div>
  </div>
</template>

<style scope>
.fourth-page {
  display: flex;
  width: 100%;
  height: 100vh;
  margin: 0;
  overflow: hidden;
  position: relative;
}

.f-left {
  margin: 0;
  background: linear-gradient(45deg, #C8A2E6 0%, #ffaf4d 50%, #f564bb 100%);
  width: 60%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  left: 0;
}

.f-right {
  position: absolute;
  right: 0;
  top: 0;
  width: 35%;
  height: 100%;
}

.f-right h1 {
  position: relative;
  padding: 25% 0 0 0;
  font-size: 2.5rem;
  color: var(--txcolor);
}

.f-right p {
  position: relative;
  padding: 6% 0 0 0;
  line-height: 2.5;
}
</style>